<template>
  <view class="customer-service">
    <view class="nav-bar" :style="`padding-top: ${statusBarHeight}px;`">
      <view class="iconfont icon-arrow-right" @click="navigateBack"></view>
      客服中心
    </view>
    <view class="header flex-row">
      <view class="phone-number"
        >“<text style="font-size: 42rpx">400-101-3812</text>„</view
      >
      <image class="person-icon" src="/static/profile/person.png" />
    </view>
    <view class="question-list" v-if="questionList.length">
      <view class="title">常见问题</view>
      <view
        v-for="i of questionList"
        :key="i.id"
        class="question-item flex-row"
        hover-class="hover-default"
        @click="toDetails(i.id)"
      >
        {{ i.title }}
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { fetchQuestionList, fetchOtherInfo } from '@/api'

const questionList = ref([])
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

fetchOtherInfo(1).then(res => console.log(res))
fetchQuestionList().then(res => (questionList.value = res))

function navigateBack() {
  uni.navigateBack()
}

function toDetails(id) {
  uni.navigateTo({
    url: '../questionList/index?id=' + id
  })
}
</script>

<style scoped lang="scss">
.customer-service {
  min-height: 100vh;
  background-image: url('~@/static/profile/bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #f9faff;
  .nav-bar {
    height: 88rpx;
    color: #333;
    font-size: 36rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon-arrow-right {
      position: absolute;
      left: 0;
      width: 88rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(180deg);
      font-size: 36rpx;
    }
  }
  .header {
    padding: 60rpx 136rpx;
    .phone-number {
      color: #377dff;
      font-size: 60rpx;
      font-weight: bold;
      text-align: left;
    }
    .person-icon {
      width: 86rpx;
      height: 86rpx;
      flex-shrink: 0;
    }
  }
  .question-list {
    overflow: hidden;
    margin: 0 30rpx;
    border-radius: 24rpx;
    background-color: #fff;
    .title {
      padding: 40rpx 32rpx 12rpx;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 36rpx;
      font-weight: bold;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 10rpx;
        height: 34rpx;
        border-radius: 4rpx;
        background-color: #377dff;
      }
    }
    .question-item {
      height: 110rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      color: #333;
      position: relative;
      & + .question-item::after {
        content: '';
        position: absolute;
        right: 30rpx;
        left: 30rpx;
        top: 0;
        border-top: 2rpx solid #f9f9f9;
      }
    }
  }
}
</style>
